<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="get($event)">点我查看所有事件对象</button><br>
        <input type="text" name="" id="" v-model="num">
        <input type="text" name="" id="" v-model="num1">
        <button @click="adda">求和(只是一个方法 不是计算属性)</button>
        <span>{{count}}</span><br>
        计算属性(这里属于双向绑定都会发生改变)： <span>{{add}}</span>
        <ul>
            <li v-for="item in arr">
                {{item.name}}=={{item.age}}
            </li>

        </ul>
        <ol>
            <li v-for="(co,index) in color">
                {{index}}=={{co}}
            </li>
        </ol>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    num: "",
                    num1: "",
                    count: '',
                    arr: [
                        { name: '阿萨德', age: 22 },
                        { name: '刘三', age: 25 },
                        { name: '王伟', age: 32 },
                    ],
                    color: [
                        'red', 'green', 'blue'
                    ]
                }
            },
            methods: {
                adda() {
                    // 字符串转数字类型的方法   +  +     和    Number
                    this.count = +this.num + +this.num1
                },
                get(event) {
                    console.log(event);
                }

            },
            computed: {
                add() {
                    // ss = Number(this.num) + Number(this.num1)
                    ss = +this.num + +this.num1
                    return ss
                }
            },
            watch: {
                // num 为监视的属性   监视第一个input框的内容
                num: {
                    // handler可以不写 下方有简写

                    handler(newval, oldval) {
                        console.log(newval, oldval);

                    }

                },
                // 给计算属性中add方法开启监视
                // add:{
                //     handler(newval, oldval) {
                //         console.log(newval, oldval);

                //     }


                // }
                add(newval, oldval) {
                    console.log(newval, oldval);

                }

            }
        })
    </script>
</body>

</html>